<template>
  <div style="display: flex;">
    <div class="iconfont1" @click="hidden1" :class="{'isShow':!isShow}" >
      <svg class="icon youtui" aria-hidden="true">
       <use xlink:href="#icon-youtuijin"></use>
    </svg></div>
    
    <div @click="openNewWindow()">
        <div class="ai" v-show="isShow">
         <img src="../../assets/title.png" alt="">
         <p>问答助手</p>
        </div>
    </div>
    <div class="iconfont2" @click="hidden2" :class="{'isShow':isShow}">
      <svg class="icon zuotui" aria-hidden="true">
       <use xlink:href="#icon-zuotuijin"></use>
    </svg></div>
  </div>
  
</template>

<script>

import '../../assets/icon/iconfont'
export default {
  name:'ai',
  data(){
    return{
      isShow:true,
    }
  },
  methods:{
    hidden1(){
      this.animation()
      setTimeout(() => {
        document.querySelector('.youtui').classList.remove('move2')
        document.querySelector('.iconfont2').style.transform = 'translateX(10vh)'
      },0)
      this.isShow = !this.isShow 
    },
    hidden2(){
      this.isShow = !this.isShow
      this.animation()
    },
    animation(){
      if(this.isShow === true){
        document.querySelector('.youtui').classList.add('move2')
      }else{
        document.querySelector('.zuotui').classList.add('move1')
      }
    },
    openNewWindow(){
      // var windowFeatures = "menubar=no,location=no,toolbar=no,scrollbars=yes,resizable=yes,width=400,height=700,left=" + position.left + ",top=" + position.top;
      var newWindow = window.open("", "newWindow", "width=350,height=600,top=350vh,left=1200vh")
      newWindow.location.href = " https://kimi.moonshot.cn/chat/cofa5n2lnl9ef6tcdu70"
    },
  },
}
</script>

<style scoped>
 .ai{
  width: 10vh;
  height: 10vh;
  background-color: #fff;
  border-radius: 0 2vh 2vh 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 2px 2px 4px 1px rgb(54, 53, 53);
 }
 .ai img{
  width: 75%;
  height: 75%;
 }
 .ai p{
  font-weight: 600;
  color: black;
 }
 .icon {
  width: 1em;
  height: 10vh;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  background-color: black;
  border-radius: 1.5vh 0 0 1.5vh;
}
.isShow{
  display: none;
}
.move1{
  animation: 0.8s move1;
  animation-fill-mode:forwards;
}
@keyframes move1 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(10vh);
    }
}
.move2{
  animation: 0.8s move2;
  animation-fill-mode:forwards;
}
@keyframes move2 {
    from {
      transform: translateX(10vh);
    }
    to {
      transform: translateX(0%);
    }
}
</style>